<template>
  <!-- <div>
    <div>姓名:{{ p.name }}</div>
    <div>年龄{{p.age }} <button @click="changeAge">+</button></div>
    <div>兴趣:{{ p.hobby }} <button @click="addHobby">add</button></div>
    <div>电话:{{ p.telephone }}
        <button @click="addPhone">增加电话</button>
        <button @click="removePhone">删除电话</button>
    </div>
    <div>
       媳妇的妈:{{ p.wife.parent.wifeName }}
       <button @click="changeYumuName">改变</button>
    </div>
    
  </div> -->

  <div>
     {{ ary }}
     <button @click="addAry">增加</button>
     <button @click="change">改变</button>
  </div>
</template>
<!--
  1、什么是响应式：所谓的响应式就是数据发生变化后，页面自动发生更新的这么一种情况
  2、为什么要进行基于数据驱动的
     基于DOM编程的不足 1）大量的DOM编程不利于企业级的开发效率的提升 2）虚拟DOM和diff的引入让真实DOM的操作尽可能最小化 
  3、vue3中如何进行响应式的操作
    vue3的响应式通过两种方式来实现
    1) ref函数的方式来实现：基本类型的响应式
    2）reactive的方式来实现:对象类型
  4、使用ref函数完成响应式的步骤
    1) 导入ref函数: import {ref} from 'vue'
    2) 调用ref来定义响应式数据:let num=ref<数据的类型>(初始值)
    3) 操作数据:ref变量.value
    4) template模板中渲染：{{ref变量}}
   5、使用reactive函数完成响应式的步骤
    1) 导入reactive函数:import {reactive} from 'vue'
    2) 调用reactive函数定义响应式数据: const 变量=reactive(初始数据)
    3）操作:直接操作
   6、vue2响应式原理
   vue2的响应式原理是采用的是数据劫持:Object.defineProperty,这种方式的缺点
   1）不能劫持数组(通过对7个方法重写实现)
   2）对于对象中新增的、删除的不能劫持、(Vue.set,Vue.delete)对于数组中通过下标或者length操作的也劫持不了
   3) 这种方式是是对对象的属性进行劫持，而不是对对象本身进行劫持
  7、reactive只能检测到堆内存中数据的变化，变化后会响应式，但ref既可以检测栈内存也能检测堆内存
     reactive采用的是Proxy代理的凡是，ref采用的是RefImpl
     ref参数类型支持更好但是必须通过`.value`访问修改
-->
<script lang="ts" setup>
  import {ref} from 'vue'
  let ary=ref(['张三','李四','王五'])
  const addAry=()=>{
    ary.value.push('赵六')
  }
  const change=()=>{
    ary.value=['zhangsan','lisi','wangwu','zhaoliu']
  }
</script>













 <!-- <script lang="ts" setup>
  import {ref} from 'vue'
  interface YuFuType{
    wifeName:string
  }
  interface WifeType{
    parent:YuFuType
  }
  interface PersonType{
    name:string
    age:number
    hobby:Array<string>
    telephone?:string,
    wife:WifeType
  }

  const p=ref<PersonType>({
    name:'zhangsan',
    age:23,
    hobby:['打篮球','踢足球'],
    wife:{
      parent:{
        wifeName:'marry'
      }
    }
  })
  const changeAge=()=>{
    p.value.age++
  }
  const addHobby=()=>{
    //p.hobby.push('打游戏')
    p.value.hobby[2]="打游戏"
  }
  const addPhone=()=>{
    p.value.telephone="13324546787"
  }
  const removePhone=()=>{
    if(p.value.telephone){
      delete p.value.telephone
    }
  }
  const changeYumuName=()=>{
    p.value.wife.parent.wifeName="Monica"
  }
  
 </script> -->







<!-- <script lang='ts' setup>
  import {ref} from 'vue'
  let num=ref<number>(0)
  const increment=()=>{
    num.value++
  }
</script> -->

<style lang='scss' scoped>
</style>